<template>
    <div class="date-stock">
        <div class="ui bottom attached tab segment active" :class="{disabled:disable}">
            <div class="control-wrapper">
                <div class="left-control">
                    <i class="angle left icon" @click="prevMonth"></i>
                    <span class="year">{{selectTime.year}}</span>
                    <span class="month" v-for="item in monthList" :class="{active:item.month===selectTime.month}" @click="monthClick(item)">{{item.month}}月</span>
                    <i class="angle right icon" @click="nextMonth"></i>
                </div>
                <div class="right-control">
                    <button class="ui secondary button mini" @click="dateStockPopShow=true">批量编辑</button>
                </div>
            </div>
            <datePiker :dateShowContent='dateShowContent' :year="selectTime.year" :month="selectTime.month" :stockData="stockDataArray"  @updateStock='updateSingleStock'></datePiker>
        </div>
        <batchEditStockPop :dateShowContent='dateShowContent' :active='dateStockPopShow' @oncancel='dateStockPopShow=false' @updatedayData='updatedayData'></batchEditStockPop>
    </div>
</template>

<script>
    import datePiker from './datepiker.vue'
    import batchEditStockPop from './batchEditStockPop.vue'

    export default {
        components:{datePiker,batchEditStockPop},
        props:{
            disable:{
                default:true
            },
            productData:{},
			dateShowContent:{
				type: Array,
				default(){
					return []
				}
			},
        },
        data(){
            return {
                attrTab: ['First'],
                attrTabActive: "First",
                dateStockPopShow:false,
                valid:true,
                monthRange:6,
                nowDate: new Date(),
                selectTime:{year:new Date().getFullYear(),month:new Date().getMonth() +1 } ,
                stockData:{}
            }
        },
        computed: {
            monthList(){
                let data = [],nowTime = new Date();
                for (var i = 0; i < this.monthRange; i++) {
                    data.push({
                        year:nowTime.getFullYear(),
                        month:nowTime.getMonth() + 1
                    });
                    if (nowTime.getMonth() === 11) {
                        nowTime = new Date(nowTime.getFullYear() + 1, 0, 1);
                    } else {
                        nowTime = new Date(nowTime.getFullYear(), nowTime.getMonth() + 1, 1);
                    }
                }
                return data
            },
            stockDataArray(){
              let array = [];
              let _this = this;
                Object.keys(_this.stockData).forEach(key=>{
                    array.push(_this.stockData[key])
                })
              return array
            },


        },
        watch:{
            stockData:{
              handler() {
                 this.$emit('upStockData', this.stockDataArray);
              },
              deep: true
		  },
		  productData:{
			handler() {
			   this.updateStockData();
			},
			deep: true
	  }
        },
        methods: {
            nextMonth(){
                if(this.selectTime.month !== this.monthList[this.monthRange-1].month){
                    if (this.selectTime.month === 12) {
                        this.selectTime.month = 1;
                        this.selectTime.year += 1;
                    } else {
                        this.selectTime.month += 1;
                    }
                }
            },
            monthClick(item){
                this.selectTime.month = item.month;
                this.selectTime.year = item.year;
            },
            prevMonth(){
                if(this.selectTime.month !== this.monthList[0].month){
                    if (this.selectTime.month === 1) {
                        this.selectTime.month = 12;
                        this.selectTime.year -= 1;
                    } else {
                        this.selectTime.month -= 1;
                    }
                }
            },
            updatedayData(data){
              this.dateStockPopShow = false;
              this.stockData = {...this.stockData,...data};
            },
            updateSingleStock(data){
              //更新指定日期的stock
                this.stockData = {...this.stockData,...{[data.date]:data}}
            },
			updateStockData(){
				if(this.productData&&this.productData.length>0){
	                let data = {}
	                this.productData.forEach(item=>{
	                    data[item.date] = item
	                })
	                this.stockData = data
	            }
			}
        },
        created() {
          this.updateStockData()
        },
    }
</script>

<style lang="less" rel="stylesheet/less" scoped>
    .date-stock {
        margin-top: 15px;
        .disabled{
          position: relative;
          z-index: 0;
            &::before{
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 9;
                background: rgba(0,0,0,0.1);
            }
        }
        label {
            margin-right: 15px;
        }
        .sale-allow {
            margin-top: 15px;
            font-size: 16px;
        }
        .control-wrapper{
            height: 40px;
            .left-control {
                display: inline-block;
                .angle.icon {
                    font-size: 1.3em;
                }
                .month{
                    cursor: pointer;
                }
                .month,.year{
                    display: inline-block;
                    min-width: 40px;
                    margin: 0 5px;
                    text-align: center;
                    &.active{
                        background: #fef5b8;
                    }
                }
            }
            .right-control{
                float: right;
            }
        }

    }
</style>
